/**
 * Created by sunguodong on 2021/12/22.
 * Email: sungd@tongtech.com
 * Description: ArGIS 创建地图
 */

import './index.less';
import React, {useEffect} from "react";
import * as esriLoader from 'esri-loader';
const options = {   
    url: 'https://js.arcgis.com/3.39/',
}
esriLoader.loadScript(options);
// esriLoader.loadCss(`https://js.arcgis.com/3.39/esri/css/esri.css`);

export const CreateMap: React.FC = () => {

  function componentDid() {

    esriLoader.loadModules([
        'esri/map',
        // 'esri/geometry/Point',
        // 'esri/SpatialReference'
    ]).then(([Map, Point, SpatialReference]) => {
        const map = new Map('mapCon', {
            basemap: 'topo-vector',
            center: [-122.45, 37.75],
            zoom: 13
        })
        // const spatialRe = new SpatialReference({
        //     wkid: 4326
        // })
        // 矢量注记图层
        // const PointObj = new Point({
        //     x: 114.41703647375107,
        //     y: 23.10750961303711,
        //     spatialReference: spatialRe
        // })
        // map.centerAndZoom(PointObj, 11)
    }).catch(err => {
        console.error(err)
    })
  }


  useEffect(() => {
    return componentDid();
  }, []);

  function componentWillUn() {

  }

  useEffect(() => () => {
    return componentWillUn();
  }, []);

  return (
    <div id="mapCon"></div>
  )
}
